<template>
    <div id="home">
        <v-top>
            <h3>小U商城</h3>
        </v-top>
        <!-- 导航栏 -->
        <nav class="nav">
            <div class="iconfont icon-dizhi nav-logo">
                <img src="../assets/img/white-logo.png" alt="小U商城">
            </div>
            <div class="nav-search" @click="toList">
                <i class="iconfont icon-sousuo"></i>
                <input type="search" placeholder="按内容搜索">
            </div>
            <div class="iconfont icon-shangcheng nav-home">
            </div>
            <div class="nav-sort">
                <!-- swiper做的分类滑动栏 -->
                    <v-cate @sortlist="sortlist"></v-cate>

                <div class="sortBtn" @click="toSort">
                    <i class=" iconfont icon-santiaogang1"></i>
                    <a href="#">分类</a>
                </div>
            </div>
        </nav>
        <!-- 中间内容 -->
        <article class="content">
            <!-- 广告图 -->
                <v-banner></v-banner>
            <!-- 活动区 -->
            <ul class="con-nav">
                <li>
                    <a href="#">
                        <img src="../assets/img/seckill.png" alt="限时秒杀">
                    </a>
                    <span>限时秒杀</span>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/img/hot.png" alt="畅销商品">
                    </a>
                    <span>畅销商品</span>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/img/brand.png" alt="品质大牌">
                    </a>
                    <span>品质大牌</span>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/img/selfsupport.png" alt="小U自营">
                    </a>
                    <span>小U自营</span>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/img/integral.png" alt="积分商城">
                    </a>
                    <span>积分商城</span>
                </li>
            </ul>
            <!-- 中间内容 -->
            <article class="content-mid">
                <section class="conMid conMid-left">
                    <a href="#">
                        <img src="../assets/img/big.png" alt="限时秒杀">
                    </a>
                    <p>
                        <span class="font32">限时秒杀</span>
                        <a href="#">
                            <span class="font20">查看更多</span>
                            <b class="iconfont icon-arrow-right font20"></b>
                        </a>
                    </p>
                    <span class="font20">每天0点场，好货秒不停</span>
                    <div class="con-reverse">
                        <!-- 倒计时 -->
                        <span class="font28">05</span>:
                        <span>20</span>:
                        <span>48</span>
                    </div>
                </section>
                <section class="conMid-right">
                    <div class="conMid conMid-top">
                        <a href="#">
                            <img src="../assets/img/small.png" alt="品牌上新">
                        </a>
                        <p>品牌上新</p>
                        <span>9点整，抢大牌</span>
                        <div>
                            <span>疯抢红包</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="conMid conMid-bot">
                        <a href="#">
                            <img src="../assets/img/small-02.png" alt="日用好物">
                        </a>
                        <p>日用好物</p>
                        <span>愿君多采撷</span>
                        <div>
                            塞满奖劵
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                    </div>
                </section>
            </article>
            <!-- 双11尖货预约 -->
            <article class="con-bot">
                <section>
                    <h5>双11尖货预约</h5>
                    <p>畅购全球</p>
                </section>
                <ul>
                    <li>
                        <img src="../assets/img/01.png" alt="商品1">
                    </li>
                    <li>
                        <img src="../assets/img/02.png" alt="商品2">
                    </li>
                    <li>
                        <img src="../assets/img/03.png" alt="商品3">
                    </li>
                    <li>
                        <img src="../assets/img/04.png" alt="商品4">
                    </li>
                </ul>
            </article>

            <!-- 选项卡 -->
            <article class="con-goods">
                <ul class="goods-chose">
                    <li :class="[index == 0 ? 'active' : '']" @click="goodsChose(0)">热门推荐</li>
                    <li :class="[index == 1 ? 'active' : '']" @click="goodsChose(1)">上新推荐</li>
                    <li :class="[index == 2 ? 'active' : '']" @click="goodsChose(2)">所有商品</li>
                </ul>
                <div v-if="index == 0">
                            <ul class="goods" v-for="item in hotgoods" :key="item.id"  @click="toDetail(item.id)">
                        <li>
                            <img :src="item.img" alt="">
                        </li>
                        <li>
                            <p>{{item.goodsname}}</p>
                            <p>现价格: ￥{{item.market_price}}</p>
                            <p>原价格: ￥{{item.price}}</p>
                            <button class="active">立即抢购</button>
                        </li>
                    </ul>
                </div>
                <div v-if="index == 1">
                    <ul class="goods" v-for="item in newgoods" :key="item.id"  @click="toDetail(item.id)">
                        <li>
                            <img :src="item.img" alt="">
                        </li>
                        <li>
                            <p>{{item.goodsname}}</p>
                            <p>现价格: ￥{{item.market_price}}</p>
                            <p>原价格: ￥{{item.price}}</p>
                            <button class="active">立即抢购</button>
                        </li>
                    </ul>
                </div>
                <div v-if="index == 2">
                    <ul class="goods" v-for="item in allgoods" :key="item.id" @click="toDetail(item.id)">
                        <li>
                            <img :src="item.img" alt="">
                        </li>
                        <li>
                            <p>{{item.goodsname}}</p>
                            <p>现价格: ￥{{item.market_price}}</p>
                            <p>原价格: ￥{{item.price}}</p>
                            <button class="active">立即抢购</button>
                        </li>
                    </ul>
                </div>
            </article>
        </article>
    </div>
</template>

<script>
//引入swiper轮播图组件
import vBanner from '../components/vHomeBanner.vue'
import vCate from "../components/vHomeCate.vue"
//引入推荐商品的接口
import {gethortgoods} from '../utils/api'

export default {
    data() {
        return {
            index:0,
            hotgoods:[],
            newgoods:[],
            allgoods:[],
        };
    },
    methods:{
        //推荐商品选项卡
        goodsChose(i){
            this.index = i
        },
        //跳转详情
        toDetail(id){
            this.$router.push('/detail/'+id)
        },
        //获取子组件cate的传递来的数据
        sortlist(e){
            this.$router.push({
                path:'/sort',
                query:{
                    catename:e
                },
            });
        },
        //分类按钮跳转
        toSort(){
            this.$router.push('/sort')
        },
        toList(){
            // console.log('aaa');
            this.$router.push('/search')
        }
    },
    components:{
        vBanner,
        vCate,
    },
    mounted() {
        //获取推荐商品选项卡内容
        gethortgoods().then(res=>{
            this.hotgoods =res.list[0].content
            this.newgoods =res.list[1].content
            this.allgoods =res.list[2].content  
        }).catch(err=>{
            console.log(err);
        })
    },
};
</script>


// 这样引入不会干扰到
<style scoped src="../assets/css/index.css">
/* @import '../assets/css/index.css'; */
</style>